<template>
  <div class="left">
    <div class="nav">
      <div class="nav-list">
        <a
          v-for="(item, index) in navItems"
          :key="index"
          href="#"
          class="nav-item"
          :class="{ active: activeIndex === index }"
          @click.prevent="setActive(index)"
        >
          <!-- 当 activeIndex 等于当前项的 index 时，添加 active 类 -->
          <span class="icon-wrapper" :style="{ color: iconColors[index] }">
            <component :is="icons[index]" />
          </span>
          {{ item }}
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Menu, Notebook, User, ChatDotRound, Briefcase } from '@element-plus/icons-vue';
import {usePostStore} from "@/stores/postStore.js";

const postStore = usePostStore()
const navItems = ref(["全部话题", "学习", "生活", "社交", "职业"]);
const activeIndex = ref(postStore.category || 0);
const icons = ref([
  Menu,
  Notebook,
  User,
  ChatDotRound,
  Briefcase
]);
const iconColors = ref([
  "#9E9E9E",
  "#4CAF50",
  "#2196F3",
  "#FF9800",
  "#F44336"
]);

const setActive = (index) => {
  if (index === 0) {
    postStore.setCategory('')
  } else {
    postStore.setCategory(index - 1)
  }

  activeIndex.value = index;
};
</script>

<style scoped>
.left {
  width: 200px;
  background-color: white;
  padding: 20px 0;
  margin: 0 auto;
  border-right: 1px solid #f0f0f0;
}

.nav {
  position: absolute;
  left: 30px;
  padding: 0 12px;
  width: 170px;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.nav-item:hover {
  background-color: #e9ecef;
}

.nav-item.active {
  background-color: #007bff;
  color: white;
}

/* 图标容器样式 */
.icon-wrapper {
  display: inline-flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
}

svg {
  width: 1em;
  height: 1em;
}
</style>
